<template>
    <div>
        <HeaderTop :title="pageTitle"/>
        <div class="userInfo">
            <div class="left">
                <van-icon name="user-circle-o" />
            </div>
            <div class="right">
                <span v-if="$store.state.userInfo.name" @click="goUserDetail">{{$store.state.userInfo.name}}</span>
                <span v-else-if="$store.state.userInfo.phone" @click="goUserDetail">{{$store.state.userInfo.phone}}</span>
                <span v-else @click="goLogin">登录 | 注册&nbsp;&nbsp;<van-icon name="arrow" /></span>
            </div>
        </div>

        <div class="service">
            <van-button type="warning" @click="Logout" v-show="$store.state.userInfo._id">退出登录</van-button>
        </div>
    </div>
</template>

<script>
import { LogoutApi } from '@/api/Login/index.js'
export default {
    name: 'Personal',
    data() {
        return {
            pageTitle: '我的'
        }
    },
    methods: {
        goLogin() {
            this.$router.push('/login')
        },
        goUserDetail() {
            this.$router.push('/user-detail')
        },
        async Logout() {
            await LogoutApi()
            localStorage.removeItem('userInfo')
            this.$store.commit('SET_USERINFO', {})
            this.$router.push('/personal')
        }
    }
}
</script>

<style lang="scss" scoped>
.userInfo {
    border-top: 1px solid #fff;
    height: 80px;
    background-color: #f18010;
    display: flex;
    align-items: center;
    .left {
        .van-icon {
            font-size: 46px;
            color: #fff;
            font-weight: 500;

            display: block;
            padding: 6px;
            border-radius: 50%;
            background-color: rgba($color: #000000, $alpha: 0.1);
            overflow: hidden;
            margin: 0 15px 0 10px;
        }
    }
    .right {
        font-size: 18px;
        color: #fff;
    }
}

.service {
    padding: 10px;

    
   /deep/ .van-button--normal {
        padding: 0 15px;
        width: 100%;
        height: 38px;
        font-size: 16px;
        background-color: #f18010;
        outline: 0;
        margin: 0 0 20px;
    } 
}

</style>